import React from "react";
import { Icon } from "antd";
import classNames from "classnames";
import styles from "./index.less";

const Trend = ({ colorful = true, flag, children, className, ...rest }) => {
  const classString = classNames(
    styles.trendItem,
    {
      [styles.trendItemGrey]: !colorful
    },
    className
  );
  return (
    <div
      {...rest}
      className={classString}
      title={typeof children === "string" ? children : ""}
    >
      <span className={styles.value}>{children}</span>
      {flag && (
        <span className={styles[flag]}>
          <Icon type={`caret-${flag}`} />
        </span>
      )}
    </div>
  );
};

export default Trend;
